<template>
  <div class="home ">

    <navbar :width="screenWidth" :key="screenWidth"></navbar>

    <div class="top">
      <!-- <template v-if="screenWidth>576"> -->
        <!-- <div> -->
          <div class="swiper-container pc-top-swiper" :class="screenWidth>576?'pageShow':'pageHiddle'">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,sin) in topbanner" :key="sin">
                <img class="imgwh" v-lazy="link+item.image" alt="">
              </div>
            </div>
          </div>
        <!-- </div> -->
        <!-- <Carousel
            :autoplay="setting.autoplay"
            :autoplay-speed="setting.autoplaySpeed"
            :dots="setting.dots"
            :radius-dot="setting.radiusDot"
            :trigger="setting.trigger"
            :arrow="setting.arrow"
            height="auto"
        >
          <CarouselItem v-for="(item,index) in topbanner" :key="index">
            <div class="demo-carousel ">
              <img class="imgwh" :src="link+item.image" alt="">
            </div>
          </CarouselItem>
        </Carousel> -->
      <!-- </template> -->
      <template v-if="screenWidth<576">
        <Carousel
            :autoplay="setting.autoplay"
            :autoplay-speed="setting.autoplaySpeed"
            dots="inside"
            :radius-dot="setting.radiusDot"
            :trigger="setting.trigger"
            :arrow="setting.arrow"
            height="auto"
        >
          <CarouselItem v-for="(item,index) in topbanner" :key="index">
            <div class="demo-carousel">
              <img class="imgwh" :src="link+item.image" alt="">
            </div>
          </CarouselItem>
        </Carousel>
      </template>

    </div>
<!--    资讯-->
    <div class="news-nav">
        <div class="acea-row row-between" style="align-items: end">
          <div class="title-nav">
            <div class="line-left"></div>
            <div class="text">
              <div class="zixun">资讯</div>
              <div class="english">INFORMATION</div>
            </div>
            <div class="line-right"></div>
          </div>
          <div class="acea-row row-around" style="width: 50%;padding-right: .625rem;" v-if="screenWidth<576">
            <div v-for="(item,index) in newslist" :key="index" :class="newsIndex==index?'white bold':''" @click.stop="newsType(index)">
              <div class="fs-14 fc-d2">{{ item.name }}</div>
            </div>
            <div class="fs-14 fc-d2" :class="newsIndex==3?'white bold':''" @click.stop="newsType(3)">动态栏目</div>
          </div>
        </div>
        <div class="content-nav">
          <div class="left acea-row row-column row-middle" v-if="screenWidth>576">
            <div class="bold fs-28 vertical">{{ navlist[1].name }}</div>
            <div class="fs-28 mt-15 mb-5">/</div>
            <div class="fs-14 mt-20 fc-d2 text-center cursor" 
              v-for="(item,i) in newslist" :key="i" :class="newsIndex==i?'white bold':''"
              @click.stop="newsType(i)"
              >{{ item.name }}</div>
            <div class="fs-14 mt-20 fc-d2 text-center cursor" :class="newsIndex==3?'white bold':''" @click.stop="newsType(3)">动态栏目</div>
          </div>

          <div class="middle" v-if="newsIndex<3">
            <div class="banner">
              <img class="imgwh" v-lazy="link+newitem.cover" alt="">
            </div>
            <div class="acea-row row-between text-box cursor" @click.stop="infopath(newitem)">
              <div class="time">
                <div class="year">{{ newitem.year }}</div>
                <div class="month">{{ newitem.month }} <span class="fs-14">/</span> {{ newitem.day }}</div>
              </div>
              <div class="context cursor">
                <div class="title ellipsis">{{ newitem.name }}</div>
                <div class="subtitle mt-5 fc-d2 ellipsis2">{{ newitem.description }}</div>
              </div>
            </div>
            <div class="context-list acea-row row-between" id="content-top" ref="myElement" v-if="newscontent.length>1">
              <div class="item fc-d2 acea-row row-between cursor" v-for="(item,index) in newscontent" :key="index" @click.stop="infopath(item)">
                <div>{{ item.year }}-{{ item.month }}-{{ item.day }}</div>
                <div class="ellipsis title">{{ item.name }}</div>
                <div><i class="iconfont icon-arrow-right-bold fc-d2"></i></div>
              </div>
              <div class="acea-row row-column row-middle line-box cursor" @click.stop="listclick()" v-if="screenWidth>576">
                <div class="news-line"><img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/news-line.png" alt=""></div>
                <div class="vertical fs-18 fc-d0 more">查看更多</div>
              </div>
              <div class="app-line-nav" @click.stop="listclick()" v-else>
                <div class="app-news-line"><img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/app-news-line.png" alt=""></div>
                <div class="fc-d0 fs-12">查看更多</div>
              </div>
            </div>
          </div>
          <div class="middle" v-else>
            <div class="banner">
              <img class="imgwh" :src="link+newitem.icon" alt="">
            </div>
            <div class="acea-row row-between text-box cursor" @click.stop="infopath(newitem)">
              <div class="time">
                <div class="year">{{ newitem.year }}</div>
                <div class="month">{{ newitem.month }} <span class="fs-14">/</span> {{ newitem.day }}</div>
              </div>
              <div class="context">
                <div class="title ellipsis">{{ newitem.portalArticle.name }}</div>
                <div class="subtitle mt-5 fc-d2 ellipsis2">{{ newitem.portalArticle.description }}</div>
              </div>
            </div>
            <div class="context-list acea-row row-between" v-if="newscontent.length>1">
              <div class="item fc-d2 acea-row row-between cursor" v-for="(item,index) in newscontent" :key="index" @click.stop="infopath(item)">
                <div>{{ item.year }}-{{ item.month }}-{{ item.day }}</div>
                <div class="ellipsis title">{{ item.portalArticle.name }}</div>
                <div><i class="iconfont icon-arrow-right-bold fc-d2"></i></div>
              </div>
              <div class="acea-row row-column row-middle line-box cursor" @click.stop="listclick()" v-if="screenWidth>576">
                <div class="news-line"><img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/news-line.png" alt=""></div>
                <div class="vertical fs-18 fc-d0 more">查看更多</div>
              </div>
              <div class="app-line-nav" @click.stop="listclick()" v-else>
                <div class="app-news-line"><img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/app-news-line.png" alt=""></div>
                <div class="fc-d0 fs-12">查看更多</div>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="bold fs-20">开放时间</div>
            <div class="bold fs-28 " :class="screenWidth>576?'mt-20':'mt-10'">{{ opentime1 }}</div>
            <div class="fs-14 " :class="screenWidth>576?'mt-15':'mt-10'">{{ opentime2 }} </div>
            <div class=" bold fs-20" :class="screenWidth>576?'mt-30':'mt-10'">地址</div>
            <div class="bold fs-20 " :class="screenWidth>576?'mt-20':'mt-10'">{{ address1 }}</div>
            <div class="fs-14 " :class="screenWidth>576?'mt-15':'mt-10'">{{ address2 }}</div>
            <div class="lianxi-nav">
              <div class="acea-row row-middle">
                <div class="icon">
                  <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/phone-icon.png" alt="">
                </div>
                <div class="">{{ phone }}</div>
              </div>
              <div class="acea-row row-middle" :class="screenWidth>576?'mt-30':''">
                <div class="icon">
                  <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/email-icon.png" alt="">
                </div>
                <div class="">{{ email }}</div>
              </div>
            </div>
          </div>
        </div>
    </div>
<!--    展览 :class="scrollDistance>1350?'zhanlan-nav-on':''"  -->
    <div class="zhanlan-nav" id="zhanlan-box">
      <div class="zhanlan-nav-bg" id="zhanlan-por"></div>
      <div style="width: 100vw;height: 18.75rem" v-if="screenWidth>576"></div>
      <div style="width: 100vw;height: 3.125rem" v-else></div>
      <div class="zhanlan-nav-bg-abso">
        <div class="title-nav">
          <div class="line-left"></div>
          <div class="text">
            <div class="zixun">展览</div>
            <div class="english">EXHIBIT</div>
          </div>
          <div class="line-right"></div>
        </div>
        <div class="list-nav acea-row" v-if="screenWidth>576">
          <div class="zhanlan001 cursor" @click.stop="aboutClick(navlist[2],zhanlanlist[0])">
            <img class="imgwh" v-lazy="link+zhanlanlist[0].images" alt="">
          </div>
          <div class="zhanlan002 cursor" @click.stop="aboutClick(navlist[2],zhanlanlist[1])">
            <img class="imgwh" v-lazy="link+zhanlanlist[1].images" alt="">
          </div>
          <div class="zhanlan003 cursor" @click.stop="aboutClick(navlist[2],zhanlanlist[2])">
            <img class="imgwh" v-lazy="link+zhanlanlist[2].images" alt="">
          </div>
          <div class="zhanlan004 cursor" @click.stop="aboutClick(navlist[2],zhanlanlist[3])">
            <img class="imgwh" v-lazy="link+zhanlanlist[3].images" alt="">
          </div>
        </div>
        <div class="zhanlan-banner-nav" :class="screenWidth<576?'pageShow':'pageHiddle'">
          <div class="swiper-container zhanlan-banner-box">
            <div class="swiper-wrapper ">
              <div class="swiper-slide zhanlan-banner" v-for="(img,ehindex) in zhanlanlist" :key="ehindex" @click.stop="aboutClick(navlist[2],img)">
                <img class="imgwh" :src="link+img.imagesMobile" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    教育-->
    <div class="education-nav">
      <div style="width: 100vw;height: 34.375rem" v-if="screenWidth>576"></div>
      <div style="width: 100vw;height: 6.25rem" v-else></div>
      <div class="title-nav">
        <div class="line-left"></div>
        <div class="text">
          <div class="zixun">教育</div>
          <div class="english">EDUCATION</div>
        </div>
        <div class="line-right"></div>
      </div>
      <div :class="screenWidth>576?'pageShow':'pageHiddle'">
        <div class="swiper mt-30">
          <div class="swiper-container eduction-swiper">
            <div class="swiper-wrapper eduction-wrapper">
              <div class="swiper-slide contents" v-for="(item,eindex) in eductionlist" :key="eindex" @click.stop="aboutClick(navlist[3],item)">
                  <div class="swiper-item acea-row row-center row-middle"
                  :style="{'background-image':`url(${link}${item.images})`}" >
                    <span>{{ item.name }}</span>
                  </div>
              </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>
      <div class="swiper-container app-eudcation-banner-nav" :class="screenWidth<576?'pageShow':'pageHiddle'">
        <div class="swiper-wrapper">
          <div class="swiper-slide app-eudcation-banner" v-for="(item,ehindex) in eductionlist" :key="ehindex" >
            <div class="imgwh bgwh acea-row row-middle row-center" :style="{'background-image':`url(${link}${item.images})`}" @click.stop="aboutClick(navlist[3],item)">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

<!--    藏品-->
    <div class="collection">
      <div style="width: 100vw;height: 28.125rem" v-if="screenWidth>576"></div>
      <div style="width: 100vw;height: 6.25rem" v-else></div>
      <div class="title-nav">
        <div class="line-left"></div>
        <div class="text">
          <div class="zixun">藏品</div>
          <div class="english">COLLECTION</div>
        </div>
        <div class="line-right"></div>
      </div>
      <div :class="screenWidth>576?'pageShow':'pageHiddle'">
        <div class="jindutiao">
          <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/jindutiao.png" alt="">
        </div>
        <div class="swiper-container diwen">
          <div class="swiper-wrapper diwen-wrapper">
            <div class="swiper-slide collection-img" v-for="(item,index) in collectlist" :key="index" @click.stop="aboutClick(navlist[4],item)">
              <img class="imgwh" :src="link+item.images" alt="">
            </div>
          </div>
        </div>
      </div> 
      <div class="app-swiper-collection" :class="screenWidth<576?'pageShow':'pageHiddle'">
        <div class="swiper-container app-collection-swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in collectlist" :key="index" @click.stop="aboutClick(navlist[4],item)">
              <div class="white text-center fs-14">{{ item.name }}</div>
              <div class="swiper-slide-img">
                <img class="imgwh" :src="link+item.images" alt="">
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div> 
      </div>
    </div>

<!--    页脚-->
    <div class="footer-nav acea-row row-center row-middle" v-if="screenWidth>576">
      <div class="yejiao acea-row row-between">
        <div class="left-box">
          <div class="caidan acea-row">
            <div class="caidan-item cursor" v-for="(item,index) in navlist" :key="index">
              <div class="fs-20 white mb-30" @click.stop="pathClick(item,index)">{{item.name }}</div>
              <div class="fs-18 " v-for="(n,k) in item.children" :key="k" @click.stop="towClick(item,n)">{{ n.name }}</div>
            </div>
          </div>
          <div class="shouquan acea-row row-middle cursor">
            <div>广西自然博物馆版权所有、法律免责　桂ICP备15006716号-1 Powered By Nhmgx.cn 桂公网安备 45010202000256号</div>
            <div class="shiyeicon">
              <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/shiyeicon.png" alt="">
            </div>
          </div>
        </div>
        <div class="shuline"></div>
        <div class="right-box">
          <div class="meuntype cursor">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/meuntype.png" alt="">
          </div>
          <div class="qrcode cursor">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/qrcode.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="footer-nav" v-else>
      <div style="width: 100vw;height: 9.375rem"></div>
      <div class="contenbox">
        <div class="white acea-row row-center row-middle bor-foor" @click.stop="scrollToTop">
          <span class="fs-12">回到顶部</span>
          <i class="iconfont icon-arrow-top ml-10"></i>
        </div>
      </div>
      <div class="app-qrcode">
        <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/qrcode.png" alt="">
      </div>
      <div class="white fs-12" style="text-align: center;">官方微信</div>
      <div class="app-shiyeicon">
        <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/shiyeicon.png" alt="">
      </div>
      <div class="white fs-12" style="text-align: center;">广西自然博物馆版权所有、法律免责</div>
      <div class="white fs-12 mt-10" style="text-align: center;">桂ICP备15006716号-1 Powered By Nhmgx.cn</div>
      <div class="white fs-12 mt-10" style="text-align: center;">桂公网安备 45010202000256号</div>
    </div>

  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import navbar from '@/components/navbar.vue';
export default {
  name: 'HomeView',
  components: {
    navbar,
  },
  data(){
    return{
      setting: {
        autoplay: true,
        autoplaySpeed: 3000,
        dots: 'none',
        radiusDot: false,
        trigger: 'hover',
        arrow: 'never'
      },
      screenWidth:'',
      scrollDistance: 0,
      navlist:[],
      newslist:[],
      topbanner:[],
      newscontent:[],
      newitem:[],
      venueinfo:[],
      opentime1:'',
      opentime2:'',
      address1:'',
      address2:'',
      phone:'',
      email:'',
      zhanlanlist:[],
      link:"",
      newsIndex:0,
      eductionlist:[],
      collectlist:[],
      zhanlantop:'',
      isElementVisible: false
    }
  },
  watch: {
      // 监听路由对象中的变化
      '$route': {
          handler: function (to, from) {
              // 路由发生变化时触发的操作
              console.log('Route changed from', from.path, 'to', to.path);
              // this.scrollToTop();
          },
          // 设置为深度监听
          deep: true
      }
  },
  mounted() {
    this.scrollToTop();
    this.getlink();
    this.getConfig();
    this.getopentime1();
    this.getopentime2();
    this.getaddress1();
    this.getaddress2();
    this.getphone();
    this.getemail();

    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    this.$nextTick(()=>{
      if( this.screenWidth>576 ){
        this.getbanner(0);
        window.addEventListener('scroll', this.checkElementVisible);
      }else{
        this.getbanner(1);
      }
    })

  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkElementVisible);
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    checkElementVisible() {
      const rect = this.$refs.myElement.getBoundingClientRect();
      let isElementVisible = (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
      let por = document.getElementById("zhanlan-por");
      if( isElementVisible ){
        setTimeout(()=>{
          por.style.top = 0 + 'px';
          por.style.backgroundSize = "100% 100%";
          por.style.left = 0;
        },200)
      }
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if( scrollTop==0 ){
        por.style.top = '-25rem'
        por.style.backgroundSize = "200% 200%";
        por.style.left = '-50%';
      }
    },
    towClick(item,child){
      this.$router.push({ path:`/about?id=${item.id}&tid=${child.id}` },()=>{}, ()=>{});
      this.meunitem = item;
      localStorage.setItem('meunitem',JSON.stringify(item))
      localStorage.setItem('childitem',JSON.stringify(child))
    },
    pathClick(item,index){
      if( index==0 ) return this.$router.push({ path:'/' },()=>{}, ()=>{})
      this.$router.push({ path:`/about?id=${item.id}&tid=${item.children[0].id}` })
        localStorage.setItem('meunitem',JSON.stringify(item))
        localStorage.setItem('childitem',JSON.stringify(item.children[0]))
    },
    listclick(){
      let that = this;
      if(that.newsIndex==3){
        that.$router.push({ path:`/about?type=3` });
        localStorage.setItem('childitem',JSON.stringify({name:'动态栏目'}))
      }else{
        that.$router.push({ path:`/about?id=${that.navlist[1].id}&tid=${that.newslist[that.newsIndex].id}` });
        localStorage.setItem('childitem',JSON.stringify(that.newslist[that.newsIndex]))
      }
      localStorage.setItem('meunitem',JSON.stringify(that.navlist[1]))
    },
    scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth' // 平滑滚动
        });
    },
    infopath(item){
      let that = this;
      if( that.newsIndex==3 ){
        that.$router.push({ path:`/info?id=${item.id}&type=3` },()=>{}, ()=>{})
        localStorage.setItem('childitem',JSON.stringify({name:'动态栏目'}))
      }else{
        that.$router.push({ path:`/info?id=${item.id}` },()=>{}, ()=>{})
        localStorage.setItem('childitem',JSON.stringify(that.navlist[1].children[0]))
      }
      localStorage.setItem('meunitem',JSON.stringify(that.navlist[1]))
    },
    getdynamic(){
      let that = this;
      that._get('/api/portal/web/dynamicArticle/list',{
        pageSize:4,
        pageNum: 1,
        orderByColumn:'sort_num,publish_time',
        isAsc:'desc'
      }).then(res=>{
        that.newitem = res.data.rows[0];
        that.newscontent = res.data.rows;
        that.newscontent.shift();
      })

    },
    newsType(i){
      let that = this;
      that.newsIndex = i;
      if( i==3 ) return that.getdynamic();
      that.getnews(that.newslist[i].id);
    },
    aboutClick(item,child){
      let that = this;
      that.$router.push({ path:`/about?id=${item.id}&tid=${child.id}` });
      localStorage.setItem('meunitem',JSON.stringify(item))
      localStorage.setItem('childitem',JSON.stringify(child))
    },
    getopentime1(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.opentime1').then(res=>{
        that.opentime1 = res.data.data.configValue;
      })
    },
    getopentime2(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.opentime2').then(res=>{
        that.opentime2 = res.data.data.configValue;
      })
    },
    getaddress1(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.address1').then(res=>{
        that.address1 = res.data.data.configValue;
      })
    },
    getaddress2(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.address2').then(res=>{
        that.address2 = res.data.data.configValue;
      })
    },
    getphone(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.phone').then(res=>{
        that.phone = res.data.data.configValue;
      })
    },
    getemail(){
      let that = this;
      that._get('/api/web/setting/configKeyObj/web.inform.email').then(res=>{
        that.email = res.data.data.configValue;
      })
    },
    getbanner(type){
      let that = this;
      that._get('/api/portal/web/banner/list',{
        pageSize: 5,
        pageNum: 10,
        type: type,
      }).then(res=>{
        that.topbanner = res.data.rows;
        that.$nextTick(()=>{
          that.pctopSwiper();
        })
      })
    },
    getConfig(){
      let that = this;
      that._get('/api/portal/web/categroy/list',).then(res=>{
        that.navlist = res.data.data;
        that.newslist = res.data.data[1].children;
        that.getnews(res.data.data[1].children[0].id)
        that.getzhanlan(res.data.data[2].id);
        that.geteduction(res.data.data[3].id)
        that.getcollect(res.data.data[4].id)
      })
    },
    getlink(){
      this._get('/api/web/setting/configKeyObj/web.pic.path').then(res=>{
        this.link = res.data.data.configValue
        localStorage.setItem('link',res.data.data.configValue)
        this.$link = res.data.data.configValue;
      })
    },
    getnews(id){
      let that = this;
      that._get('/api/portal/web/article/list',{
        cid: id,
        pageSize:4,
        pageNum:1,
        orderByColumn:'sort_num,publish_time',
        isAsc:'desc'
      }).then(res=>{
        that.newitem = res.data.rows[0];
        that.newscontent = res.data.rows;
        that.newscontent.shift();
      })
    },
    getzhanlan(id){
      let that = this;
      that._get('/api/portal/web/categroy/list',{
        pid: id,
        pageSize:4,
        pageNum:1
      }).then(res=>{
        that.zhanlanlist = res.data.data;
        that.$nextTick(()=>{
          that.appzhanlanwiper();
        })
      })
    },
    geteduction(id){
      let that = this;
      that._get('/api/portal/web/categroy/list',{
        pid: id,
        pageSize:10,
        pageNum:1
      }).then(res=>{
        that.eductionlist = res.data.data;
        that.$nextTick(()=>{
          that.eductionSwiper();
          that.appeductionswiper();
        })
      })
    },
    getcollect(id){
      let that = this;
      that._get('/api/portal/web/categroy/list',{
        pid: id,
        pageSize:10,
        pageNum:1
      }).then(res=>{
        let list = res.data.data;
        if( list.length < 3 ){
          list.push( list[0] )
          that.collectlist = list;
        }else{
          that.collectlist = res.data.data;
        }
        that.$nextTick(()=>{
          that.collectiobSwiper();
          that.appinteSwiper();
        })
      })
    },
    handleResize() {
      this.screenWidth = window.innerWidth;
    },
    // pc顶部swiper
    pctopSwiper(){
      new Swiper(".pc-top-swiper", {
        loop: true,
        mousewheel: false, // 禁用鼠标滚轮
        speed: 1000,
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        observeParents: true,
        observer: true
      });
    },
    appinteSwiper(){
      // 下面是普通swiper模板
      new Swiper(".app-collection-swiper", {
        loop: true,
        mousewheel: false,
        keyboard: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        observeParents: true,
        observer: true
      });
    },
    // 展览h5
    appzhanlanwiper(){
      new Swiper(".zhanlan-banner-box", {
        loop: true,
        mousewheel: false,
        keyboard: true,
        observeParents: true,
        observer: true
      });
    },
    // 藏品swiper
    collectiobSwiper(){
      new Swiper(".diwen", {
        loop: true,
        direction: "horizontal",
        initialSlide: 1,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 120,
        observeParents: true,
        observer: true
      });
    },
    // 教育swiper
    eductionSwiper(){
      new Swiper(".eduction-swiper", {
        loop: true,
        direction: "horizontal",
        initialSlide: 1,
        slidesPerView: "3",
        centeredSlides: true,
        spaceBetween: 30,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        observeParents: true,
        observer: true
      });
    },
    // 教育swiperh5
    appeductionswiper(){
      new Swiper(".app-eudcation-banner-nav", {
        loop: true,
        direction: "horizontal",
        initialSlide: 1,
        slidesPerView: "3",
        centeredSlides: true,
        spaceBetween: 10,
        observeParents: true,
        observer: true
      });
    },

  },
}
</script>
<style lang="scss">
  .home{
    overflow: hidden;

    .title-nav{
      width: 20.625rem;
      height: 4.375rem;
      display: flex;
      align-items: end;
      color: #ffffff;

      .zixun{
        font-size: 2.375rem;
      }
      .text{
        margin: .625rem .625rem 0 .625rem;
      }
      .english{
        font-size: .875rem;
      }
      .line-left{
        width: 9.5rem;
        height: .0625rem;
        background-color: #ffffff;
        margin-bottom: .3125rem;
      }
      .line-right{
        width: 2.625rem;
        height: .0625rem;
        background-color: #ffffff;
        margin-bottom: .3125rem;
      }
    }

    .top{
      width: 100vw;
      max-height: auto;

      .pc-top-swiper{
        width: 100%;
        height: auto;
      }

    }

    .news-nav{
      width: 100vw;
      min-height: 65.6875rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/news-bg.png");
      background-size: 100% 100%;
      padding: 3.125rem 0;
      margin-top: -0.625rem;

      .content-nav{
        display: flex;
        flex-wrap: wrap;
        padding-top: 3.125rem;

        .left{
          width: 2.5rem;
          color: #ffffff;
          margin-left: 9.375rem;
        }
        .middle{
          width: 56.25rem;
          margin-left: 5rem;

          .banner{
            width: 50.25rem;
            height: 19.625rem;
          }

          .text-box{
            margin-top: 3.125rem;
            width: 50.25rem;
            padding-bottom: 3.125rem;
            border-bottom: .0625rem solid #D0B66E;

            .time{
              color: #D0B66E;
            }
            .year{
              font-size: 1.25rem;
            }
            .month{
              font-size: 2.375rem;
            }
            .context{
              width: 39.25rem;
              color: #ffffff;
              font-size: 1rem;

              .title{
                font-size: 1.25rem;
              }
              .subtitle{
                font-size: 1.125rem;
              }
            }
          }

          .context-list{

            .item{
              width: 50.25rem;
              font-size: 1.125rem;
              margin-top: 1.875rem;

              .title{
                width: 30.5625rem;
              }
            }
            .news-line{
              width: .0625rem;
              height: 7.8125rem;
            }
            .more{
              margin-top: .625rem;
              letter-spacing: .125rem;
            }
            .line-box{
              margin-top: -6.25rem;
            }
          }


        }

        .right{
          width: 27.25rem;
          height: 39.25rem;
          color: #ffffff;
          margin-left: 6.25rem;

          .lianxi-nav{
            width: 26.5rem;
            height: 12.5rem;
            border: .0625rem solid #D0B66E;
            margin-top: 9.375rem;
            padding-left: 3.125rem;
            font-size: 1.75rem;
            display: flex;
            justify-content: center;
            flex-direction: column;

            .icon{
              width: 2.5rem;
              height: 2.5rem;
              margin-right: .625rem;
            }

          }

        }
      }

    }

    .zhanlan-nav{
      width: 100vw;
      height: 109.375rem;
      margin-top: -15.625rem;
      position: relative;
      //overflow: hidden;
      z-index: 99;

      .zhanlan-nav-bg{
        position: absolute;
        top: -25rem;
        //left: 0;
        left: -50%;
        right: 0;
        bottom: 0;
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/zhanlan-bg.png");
        background-size: 200% 200%;
        z-index: 99;
        transition: all 1.5s linear;

        @media screen and (max-width: 36rem) {
          left:0;
          top: -3.125rem;
          background-size: 100% 100%;
        }
       

       /* &.zhanlan-nav-on{
          animation: zoom-animation 2s linear;
        }*/

      }

      .zhanlan-nav-bg-abso{
        z-index: 999 !important;
        position: absolute;
      }

      @keyframes zoom-animation {
        0% {
          //transform: scale(2);
          background-size: 200% 100%;
          left: -50%;
        }
        50% {
          //transform: scale(1.5); /* 放大到原始尺寸的50% */
          background-size: 150% 100%;
          left: -25%;
        }
        100% {
          //transform: scale(1);
          background-size: 100% 100%;
          left: 0;
        }
      }
      
      .list-nav{
        .zhanlan001{
          width: 29rem;
          height: 60.8125rem;
          margin-top: 6.25rem;
          margin-left: 3.75rem;
        }
        .zhanlan002{
          width: 32.5625rem;
          height: 54.5625rem;
          margin-top: 1.25rem;
          margin-left: 2.5rem;
        }
        .zhanlan003{
          width: 28.25rem;
          height: 62.625rem;
          margin-top: 12.5rem;
          margin-left: -7.5rem;
        }
        .zhanlan004{
          width: 26.875rem;
          height: 57.8125rem;
          margin-top: 1.875rem;
          margin-left: -3.125rem;
        }
      }
      
    }

    .education-nav{
      width: 100vw;
      height: 80.1875rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/education-bg.png");
      background-size: 100% 100%;
      margin-top: -34.375rem;
      position: relative;
      z-index: 9999;

      .swiper{
        width: 85%;
        height: 31.25rem;
        margin: 3.125rem auto;
        //display: flex;
        //flex-wrap: nowrap;
        //justify-content: space-between;
        //align-items: center;
        position: relative; 
        padding: 0 3.125rem;
        //border: .0625rem solid red;

        .swiper-container{
          position: unset;
        }


        .eduction-swiper{
          width: 85%;
         // width: 92.5rem;
          height: 26rem;


          .swiper-wrapper{
            //border: .0625rem solid red;
            //margin-top: 1.25rem;


            .contents{
              width: 26rem;
              height: 26rem;
             

              .swiper-item{
                width: 26rem;
                height: 26rem;
                background-size: 100% 100%;
                border-radius: 50%;
                overflow: hidden;
                color: #FFFFFF;
                font-size: 2.25rem;
                margin: 0 .625rem;
                //border: .0625rem solid #000;
              }
            }
          }

          .swiper-button-next{
            width: 6.25rem;
            height: 6.25rem;
            background-size: 100% 100%;
            background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/swiper-right.png");
            color: transparent;
            //border: .0625rem solid r#ffffff;
            position: absolute;
            //top: -0.3125rem;
          }
          .swiper-button-prev{
            width: 6.25rem;
            height: 6.25rem;
            background-size: 100% 100%;
            background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/swiper-left.png");
            color: transparent;
            //border: .0625rem solid r#ffffff;
            position: absolute;
            //top: -0.3125rem;
          }

        }
      }
    }

    .collection{
      width: 100vw;
      height: 103.5625rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/collection-bg.png");
      background-size: 100% 100%;
      margin-top: -21.875rem;
      position: relative;
      z-index: 9999;

      .jindutiao{
        width: 100vw;
        height: 10rem;
        margin-top: 3.125rem;
      }

      .diwen{
        width: 100vw;
        height: 42.1875rem;
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/diwen.png");
        background-size: 100% 100%;
        //border: .0625rem solid red;
        display: flex;
        align-items: center;

        .diwen-wrapper{
          height: 32.625rem;
        }
        .swiper-slide-prev,.swiper-slide-next{
          scale: 0.7;
        }

        .collection-img{
          width: 43.75rem !important;
          height: 32.625rem;
          //border: .0625rem solid #ffffff;
        }
        .collection-pic-left{
          width: 29.375rem;
          height: 21.5625rem;
          margin-left: -6.25rem;
        }
        .collection-pic-right{
          width: 29.375rem;
          height: 21.5625rem;
          margin-right: -6.25rem;
        }
      }
      .app-swiper-collection{
        width: 22.5rem;
        height: 14.375rem;
        margin: 1.875rem auto;
        color: #ffffff;
        overflow: hidden;
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-swiper-collection-nav-bg.png");
        //background-size: 100% 100%;
        background-size: contain;
        background-repeat: no-repeat;

        //.app-collection-swiper{
        //  margin-top: -1.25rem;
        //}

        .swiper-wrapper{
          width: 18.75rem;

          .swiper-slide{
            width: 100%;

            .swiper-slide-img{
              width: 15.5rem;
              height: 11.5625rem;
              margin: 0 auto;
            }
          }
        }

        //.swiper-slide{
        //  background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-swiper-collection-bg.png");
        //  background-size: 100% 100%;
        //  width: 12.5rem;
        //  height: 12.5rem;
        //  margin: 0 auto;
        //}
        .swiper-button-next{
          width: 1.875rem;
          height: 1.875rem;
          background-size: 100% 100%;
          background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/swiper-right.png");
          color: transparent;
        }
        .swiper-button-prev{
          width: 1.875rem;
          height: 1.875rem;
          background-size: 100% 100%;
          background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/swiper-left.png");
          color: transparent;
        }
      }
    }

    .footer-nav{
      width: 100vw;
      height: 68.75rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/footer-bg1.png");
      background-size: 100% 100%;
      margin-top: -31.25rem;
      position: relative;
      z-index: 9999;

      .yejiao{
        width: 104.375rem;
        height: 28.75rem;
        border-top: .0625rem solid #ffffff;
        margin-top: 34.375rem;
        padding-top: 3.125rem;

        .left-box{

          .caidan{
            color: #FFF6E5;
            height: 18.75rem;

            .caidan-item{
              line-height: 2.1875rem;
              width: 9.375rem;
            }
          }

          .shouquan{
            color: #ffffff;
            font-size: 1.125rem;
          }

          .shiyeicon{
            width: 3.125rem;
            height: 3.125rem;
          }
        }
        .shuline{
          width: .0625rem;
          height: 7.0625rem;
          background-color: #ffffff;
        }
        .right-box{
          width: 25rem;

          .meuntype{
            width: 19.8125rem;
            height: 6.625rem;
            margin: 0 auto;
          }

          .qrcode{
            width: 15.0625rem;
            height: 15.0625rem;
            margin: 3.125rem auto;
          }

        }

      }
    }

    @media screen and (max-width: 36rem) {

      .title-nav{
        width: 7.4375rem;
        height: 2.5rem;
        .zixun{
          font-size: 1.5rem;
        }
        .text{
          margin: .5rem .5rem 0 .5rem;
        }
        .english{
          font-size: .625rem;
        }
        .line-left{
          width: 2.375rem;
          height: .0625rem;
          margin-bottom: .3125rem;
        }
        .line-right{
          width: .75rem;
          height: .0625rem;
          margin-bottom: .3125rem;
        }
      }

      .news-nav{
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-news-bg.png");
        height: 53.625rem;

        .content-nav{
          padding-left: 1.25rem;
          padding-right: 1.25rem;

          .middle{
            margin: 0;
            flex: 1;

            .banner{
              width: 100%;
              //height: 12rem;
              height: auto;
            }
            .text-box{
              width: 100%;
              padding-bottom: 1.25rem;

              .year{
                font-size: .875rem;
              }
              .month{
                font-size: 1.5rem;
              }
              .context{
                width: 20.5rem;

                .title{
                  font-size: .875rem;
                }
                .subtitle{
                  font-size: .75rem;
                }
              }
            }
            .context-list{
              //width: 100%;

              .item{
                font-size: .75rem;
                margin-top: .625rem;
                width: 100%;

                .title{
                  max-width: 15.625rem;
                }
              }
              .app-line-nav{
                flex: 1;
                display: flex;
                justify-content: end;
                margin-top: .625rem;
              }
              .app-news-line{
                width: 3.375rem;
                height: .0625rem;
                margin-right: .625rem;
                margin-top: -0.3125rem;
              }
            }
          }

          .right{
            margin: 1.25rem 0 0 0;

            .lianxi-nav{
              width: 100%;
              height: 3.75rem;
              margin-top: 1.25rem;
              padding: 0;
              font-size: 1rem;
              display: flex;
              justify-content: space-around;
              flex-direction: unset;

              .icon{
                width: 1.5rem;
                height: 1.5rem;
              }
            }
          }
        }
      }

      .zhanlan-nav{
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-exhibit-bg.png");
        height: 25.625rem;
        margin-top: -6.25rem;

        .zhanlan-banner-nav{
          margin: 2.5rem auto;
          display: flex;
          justify-content: center;
          width: 100vw;
        }
        .zhanlan-banner-box{
          width: 21.5625rem;
          height: 12rem;
        }
        .zhanlan-banner{
          width: 100%;
        }
      }

      .education-nav{
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-education-bg.png");
        height: 18.75rem;
        margin-top: -6.25rem;

        .app-eudcation-banner-nav{
          width: 92%;
          margin: 1.875rem auto 0 auto;

          .app-eudcation-banner{
            width: 6.625rem;
            height: 5.125rem;
            font-size: .875rem;
            color: #FFFFFF;
            //border: .0625rem solid red;
          }
        }
      }

      .collection{
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-collection-bg.png");
        height: 31.125rem;
        margin-top: -6.25rem;
      }

      .footer-nav{
        background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/app-footer-bg.png");
        height: 36.5625rem;
        margin-top: -8.75rem;

        .contenbox{
          padding: 1.25rem;

          .bor-foor{
            border-bottom: .0625rem solid #ffffff;
            padding-bottom: 1.25rem;
          }
        }
        .app-qrcode{
          width: 5.375rem;
          height: 5.375rem;
          margin: 1.25rem auto .625rem auto;
        }
        .app-shiyeicon{
          width: 3.5rem;
          height: 3.5rem;
          margin: 1.25rem auto .625rem auto;
        }
      }
    }
  }
</style>
